<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 行内样式优先级(1000) > ID选择器(100) > 类选择器(10) > 元素选择器(1) */
      /* 合并选择器  */
      #box {
        background-color: blue;
      }

      /* > 是子代选择器 */
      .box1 > span {
        background-color: blueviolet;
      }

      .box1 > p > span {
        background-color: green;
      }

      /* 后代选择器 空格*/
      .box1 span {
        background-color: yellow;
      }

      /* 相邻兄弟选择器 + 选中下一个兄弟*/
      .two + p {
        background-color: pink;
      }

      /* 通用兄弟选择器  ~ */
      .two ~ p {
        background-color: red;
      }

      .box2 {
        background-color: aqua;
        height: 100px;
        width: 100%;
        background: url("../image/bixin.jpg") no-repeat;
        /* 背景图片大小 
        取值px % cover contain
        当只取一个值，表示宽度，高度等比例缩放
        cover:覆盖，背景图片覆盖整个背景区域，但是背景图片可能显示不全
        contain:内容，背景图片拉伸至最大，背景区域可能覆盖不全 */
        background-size: 100px 20px;
        /* 背景图片定位
        background-position:0px 0px;
        取值px % left right center top bottom当只取一个值，另外一个值默认居中
        当取正值，背景图片往右下移动;
        取负值，背景图片往左上移动
        */
        background-position: 10px 10px;
        /* 背景图片是否固定
        scroll: 默认值 滚动 跟着页面滚动
        fixed：固定
        */
        background-attachment: fixed;
        /* 顺序如下
        background: red url() repeat size  position attachment; */
      }
      /* 字符间的间距  letter-spacing */
      .box3 {
        width: 300px;
        height: 200px;
        background-color: burlywood;
        /* 一行文字溢出省略号显示 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .box4 {
        width: 1000px;
        height: 400px;
        background-color: #ccc;
        overflow: hidden;
      }

      .box5 {
        width: 100px;
        height: 100px;
        background-color: gray;
        /* 不使用百分比，因为margin和padding都是按父元素的宽度乘以比例 */
        margin-top: 10%;
        margin-left: 10%;
        padding: 10%;
      }

      /* box-sizing: conten-box 和 border-box 标准盒模型和怪异盒模型 */

      /* 伪类选择器
        这四种状态同时存在的时候必须按固定的顺序写
        :link 链接
        :visited 访问过的
        :hover 悬停
        :active 激活
      */

      /* 不区分元素类型
        :first-child
        :last-child
        :nth-child()
        区分元素类型
        :first-of-type
        :last-of-type
        :nth-of-type()
      */

      /* 1.浮动，元素浮动排除到普通文档流之外（元素浮动后再页面不占据位置） 
        2.元素浮动碰到父元素的边框或者浮动元素的边框就会停止
        3.浮动元素可以垂直对齐
        4.清除浮动，清除浮动的原理是创建一个新的块级格式化上下文
        5.清除浮动的方法
          (1)给父元素添加overflow:hidden
          (2)给父元素添加display:flex/inline-flex
          (3)给父元素添加_clearfix
        6.浮动元素不会重叠
        7.任何元素都可以浮动，浮动后转换为块级元素
        8.浮动元素会影响父元素的高度计算，浮动元素的父元素没有内部浮动元素，
          父元素的高度会塌陷，解决办法是给父元素添加一个高度，或者给父元素添加overflow:hidden
        9.浮动元素不会影响内联元素

        清楚浮动的影响：
        元素浮动后不占据位置，父元素高度塌陷，对后面的元素产生影响
        解决方案：
        1.给父元素添加一个高度
        2.给父元素添加overflow:hidden（自动找高）
        3.受影响的元素增加 clear:both （受影响的元素回到正常位置，但是父元素的高度没有找到）
        4.空div法 [弊端是增加了空元素]  浮动元素后面加一个空div（clear:both）  空元素清除浮动影响
        5.伪对象法 相当于增加了一个空div
      */
      .box6 {
        background-color: skyblue;
      }
      .one, .two, .three {
        width: 100px;
        height: 100px;
        background-color: pink;
        float: left;
      }
      .two {
        background-color: palegreen;
      }
      .box6::after {
        content: "";
        display: block;
        clear: both;
      }
      /* .clear {
        clear: both;
      } */
      /* 伪对象选择器 也被叫伪元素选择器，表示页面中的元素不存在该元素
        ::first-letter 选择文本内容的第一个字母
        ::first-line 选择文本内容中的第一行
        ::selection 选择用户选中的元素内容
        ::before 插入内容在元素之前
        ::after 插入内容在元素之后
        content: "" 插入的内容
        display: block 显示为块级元素
        clear: both 清除浮动
      */
      .box7 {
        background-color: yellow;
      }
      .box7::before {
        /* 默认不是块级元素 */
        content: "";
        /* 需要转换为块级元素 */
        display: block;
        width: 100px;
        height: 100px;
        background-color: green;
      }
      .box7::after {
        content: "sdfsa";
      }

      /* 绝对定位它的位置是相对于初始包含块 可以理解就是窗口的视口 
        相对定位 相对于初始包含块的位置进行偏移
        left top right bottom
        绝对定位 相对于最近的已定位祖先元素的位置进行偏移
        left top right bottom 
      */
      /* z-index 堆叠顺序  默认值auto 和父元素同一等级 */
      /* display 每个元素都会有的属性  
        inline 行内元素 默认值
        block 块级元素
        inline-block: 行内块  同一行显示，有可以设置宽高  img、 input、 button  有缺陷 会识别元素间的空格会成为问题 
        none: 隐藏 影藏后不占据位置
        flex: 弹性布局
        inline-flex: 行内弹性布局
        table: 表格布局
      */

      /* 线性渐变 */
      .box8 {
        width: 500px;
        height: 100px;
        background: linear-gradient(70deg, red, yellow, blue);
      }
      
      /* 转换  变形 
        transform: translate(0, 0) rotate(0deg) scale(1) skew(0deg, 0deg);
                    位移              旋转          缩放      倾斜
        translate 可以取值px %(依据自身的宽高)  
        scale 可以取一个值或者两个值，水平方向  垂直方向   

        skew  水平取值  垂直取值
      */
      .box9 {
        width: 200px;
        height: 100px;
        background-color: blueviolet;
        transition: 1;
      }
      .box9:hover {
        /* 位移 */
        /* transform: translate(10px, 10px); */
        /* 旋转 */
        /* transform: rotate(30deg); */
        /* 缩放 */
        /* transform: scale(1); */
        /* 倾斜 */
        transform: skew(80deg, 0);
      }

      /* 过渡
        可以过渡的属性：
        1、取值为颜色
        2、取值为数值
        3、阴影 box-shadow
        4、转换 transform

        transition-timing-function: ease: 先加速后减速
                                    ease-in: 加速
                                    ease-out: 减速
                                    ease-in-out: 先加速后减速
                                    linear: 匀速
        transition-property: 指定属性  background-color
        transition-duration: 指定持续时间 0.5s
        transition-delay: 延迟时间 如果取负值就代表  跳过这段时间的效果
        transition: 0.5s linear background-color 0s;
        transition: 2s all linear 0s;
      */  
    </style>
  </head>
  <body>
    <div style="background-color: red" id="box">123</div>

    <div class="box1">
      div文字
      <span>div中的span</span>
      <p>
        div中的p
        <span>p中的span</span>
      </p>
    </div>

    <p>第1个段落</p>
    <p class="two">第2个段落</p>
    <p>第3个段落</p>
    <p>第4个段落</p>
    <p>第5个段落</p>

    <div class="box2">哈哈哈</div>

    <div class="box3">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste delectus
      corrupti cupiditate eligendi dicta saepe esse sequi error laborum omnis?
      Officia quasi velit tempore molestiae eligendi animi facere asperiores
      fuga.
    </div>

    <div class="box4">
      <div class="box5"></div>
    </div>

    <!-- float -->
    <div class="box6">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
      <!-- <div class="clear"></div> -->
    </div>
    <!-- 伪元素 -->
    <div class="box7">
      伪元素
    </div>
  
    <div class="box8">
      线性渐变
    </div>

    <div class="box9">
      转换变形  transform
    </div>


  </body>
</html>
